<template>
    <view class="container" style="">
        <view style="background-color: white">
            <view style="display: flex;justify-content: space-between;width: 90%;margin: auto;padding: 30rpx" >
                <view @click="dispatchtype='',page=1,getdata()"  :class="dispatchtype==''?'actred':'nred'" style="position: relative">
                    待使用
                </view>
                <view @click="dispatchtype='used',page=1,getdata()" :class="dispatchtype=='used'?'actred':'nred'" style="position: relative">
                    已用完
                </view>
                <view @click="dispatchtype='past',page=1,getdata()" :class="dispatchtype=='past'?'actred':'nred'" style="position: relative">
                    已过期
                </view>
            </view>
        </view>
        <view class="hlbblock" style="overflow: hidden;position: relative" v-for="item in list">
            <navigator :url="'/pagesVerify/verifygoods/detail?order_id='+item.opt_id+'&type='+item.product_type"  style="width: 100%">
                <image :src="item.image.file_path" style="width: 100%;height: 170rpx;" mode="aspectFill"></image>
                <view style="position: absolute;top: 0;width: 100%;background: linear-gradient(to right,white 40%,rgba(245,245,245,0));height: 172rpx">

                    <view style="padding: 24rpx">
                        <view style="font-weight: bold;">
                            {{item.product_name}}
                        </view>
                        <view class="font2599">
                            有效期：{{item.time_verify_text.text}}
                        </view>
                    </view>

                </view>
				<!-- product_type: 3计次商品 4旅游商品 -->
                <view v-if="item.product_type == 3" style="padding: 20rpx;display: flex;justify-content: space-between;align-items: center">
                    <view class="font2599">
                        <block v-if="item.verify_num==0">
                            包含核销次数：不限次数
                        </block>
                        <block v-else>
                            包含核销次数：{{item.verify_num}}次
                        </block>
                        <text style="margin-left: 20rpx">已核销  {{item.already_verify}}次</text>
                    </view>
                    <view style="display: flex;align-items: center">
                        <view v-if="item.surplus_num>0" style="background-color:#FC5E57;border-radius: 50%;width: 40rpx;height: 40rpx;text-align: center;color: white;font-size: 25rpx ">
                            {{item.surplus_num}}
                        </view>
                       <image src="/static/images/order/arrow.png" style="width: 25rpx;margin-left: 12rpx;" mode="widthFix"></image>
                    </view>
                </view>
				<view v-if="item.product_type == 4" style="padding: 24rpx;display: flex;justify-content: space-between;align-items: center">
				    <view class="font2599">
				        出行人：{{item.name}} {{item.mobile}}
				    </view>
				    <view style="display: flex;align-items: center">
				        <view v-if="item.used>0" style="background-color:#FC5E57;border-radius: 50%;width: 40rpx;height: 40rpx;text-align: center;color: white;font-size: 25rpx ">
				            {{item.used}}
				        </view>
				        <view class="display-flex" style="align-items: center;">
							<image src="/static/images/benefit/icon-qrcode.png" style="width: 32rpx;" mode="widthFix"></image>
							<image src="/static/images/order/arrow.png" style="width: 25rpx;margin-left: 12rpx;" mode="widthFix"></image>
						</view>
				    </view>
				</view>
            </navigator>
        </view>

       <view class="uni-loadmore"  style="background-color: #F2F2F2">{{loadMoreText}}</view>
    </view>
</template>

<script>
    var _self;
    export default{
        computed: {
        },
        data() {
            return {
                ish5:false,
                dispatchtype:'',
                page: 1,
                list: [],
                total:0,
                loadMoreText: "加载中...",
                showLoadMore: false,

            };
        },
        onShow(){

            //#ifdef H5
            this.ish5 = true
            //#endif
            _self.getdata()
        },
        async onLoad(options){
            _self = this;
            _self.id = options.id;

        },
        onReachBottom() { //监听上拉触底事件
            this.getdata();
        },
        methods:{
            getdata(){
                let _this = this;
                if(_self.page == 1){
                    _self.list = [];
                }
                uni.showLoading({
                    title: '加载中',
                    mask:true
                });

                let status =1;
                if (_self.dispatchtype=='used'){
                    status =2;
                }
                if (_self.dispatchtype=='past'){
                    status =3;
                }
                
                console.log(status)

                _self._get('user.cardvoucher/list', {
                    data_status:status,
					page: _self.page,
                }, function(res) {
					if (res.data.total > 0) {
						_self.loadMoreText = "加载更多";
						_self.total = res.data.total;
						console.log(_self.total);
						if (res.data.data.length < res.data.per_page || res.data.total == 0) {
							_self.loadMoreText = "暂无更多";
						}
						_self.list = _self.list.concat(res.data.data);
						_self.page++;
					} else {
						_self.loadMoreText = "暂无更多";
					}
                });
            },
        },
    }
</script>

<style lang='scss'>
    .nred{
        color: rgba(0,0,0,0.56);
    }
    .actred{
        color: #EB2728;
    }
    .actred:after{
        content: " ";
        display: inline-block;
        height: 16rpx;
        width: 60rpx;
        border-width: 4rpx 0 0 0;
        border-color: #EB2728;
        border-style: solid;
        border-radius: 4rpx;
        position: absolute;
        top: 50rpx;
        left: 6rpx;
        margin-left: .3em;
    }

.bag{
    background-color: #F63E36;
    color: white;width:30rpx;
    height: 30rpx;
    border-radius: 30rpx;
    line-height: 30rpx;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 20rpx;
    z-index: 99
}
.disable{
    background-color: #e9e9e9 !important;
}
    page{
        background: #F2F2F2;
        padding-bottom: 160upx;
    }
    .choseladder{
        background-color: #ff4a4b !important;
        color: white;
    }
    .icon-you{
        font-size: $font-base + 2upx;
        color: #888;
    }
    .carousel {
        height: 722upx;
        position:relative;
        swiper{
            height: 100%;
        }
        .image-wrapper{
            width: 100%;
            height: 100%;
        }
        .swiper-item {
            display: flex;
            justify-content: center;
            align-content: center;
            height: 750upx;
            overflow: hidden;
            image {
                width: 100%;
                height: 100%;
            }
        }

    }
    .confirm-btn{
        width: 700rpx;
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 50px;
        background: #CC2E2F;
        color: #E4E4E4;
        font-size: $font-lg;
        &:after{
            border-radius: 100px;
        }
    }

    /* 标题简介 */
    .introduce-section{
        background: #fff;
        padding: 20upx 30upx;


        .price-box{
            display:flex;
            align-items:baseline;
            justify-content: space-between;
            height: 64upx;
            padding: 10upx 0;
            font-size: 26upx;
            color:$uni-color-primary;
        }
        .price{
            font-size: $font-lg + 2upx;
            .m-price{
                font-size: 25rpx;
                margin:0 12upx;
                color: $font-color-light;
                text-decoration: line-through;
            }
        }

        .coupon-tip{
            align-items: center;
            padding: 4upx 10upx;
            background: $uni-color-primary;
            font-size: $font-sm;
            color: #fff;
            border-radius: 6upx;
            line-height: 1;
            transform: translateY(-4upx);
        }
        .bot-row{
            display:flex;
            align-items:center;
            height: 50upx;
            font-size: $font-sm;
            color: $font-color-light;
            text{
                flex: 1;
            }
        }
    }
    /* 分享 */
    .share-section{
        display:flex;
        align-items:center;
        color: $font-color-base;
        background: linear-gradient(left, #fdf5f6, #fbebf6);
        padding: 12upx 30upx;
        .share-icon{
            display:flex;
            align-items:center;
            width: 70upx;
            height: 30upx;
            line-height: 1;
            border: 1px solid $uni-color-primary;
            border-radius: 4upx;
            position:relative;
            overflow: hidden;
            font-size: 22upx;
            color: $uni-color-primary;
            &:after{
                content: '';
                width: 50upx;
                height: 50upx;
                border-radius: 50%;
                left: -20upx;
                top: -12upx;
                position:absolute;
                background: $uni-color-primary;
            }
        }
        .icon-xingxing{
            position:relative;
            z-index: 1;
            font-size: 24upx;
            margin-left: 2upx;
            margin-right: 10upx;
            color: #fff;
            line-height: 1;
        }
        .tit{
            font-size: $font-base;
            margin-left:10upx;
        }
        .icon-bangzhu1{
            padding: 10upx;
            font-size: 30upx;
            line-height: 1;
        }
        .share-btn{
            flex: 1;
            text-align:right;
            font-size: $font-sm;
            color: $uni-color-primary;
        }
        .icon-you{
            font-size: $font-sm;
            margin-left: 4upx;
            color: $uni-color-primary;
        }
    }

    .c-list{
        font-size: $font-sm + 2upx;
        color: $font-color-base;
        background: #fff;
        .c-row{
            display:flex;
            align-items:center;
            padding: 20upx 30upx;
            position:relative;
        }
        .tit{
            width: 140upx;
        }
        .con{
            flex: 1;
            color: $font-color-dark;
            .selected-text{
                margin-right: 10upx;
            }
        }
        .bz-list{
            height: 40upx;
            font-size: $font-sm+2upx;
            color: $font-color-dark;
            text{
                display: inline-block;
                margin-right: 30upx;
            }
        }
        .con-list{
            flex: 1;
            display:flex;
            flex-direction: column;
            color: $font-color-dark;
            line-height: 40upx;
        }
        .red{
            color: $uni-color-primary;
        }
    }

    /* 评价 */
    .eva-section{
        display: flex;
        flex-direction: column;
        padding: 20upx 30upx;
        background: #fff;
        margin-top: 16upx;
        .e-header{
            display: flex;
            align-items: center;
            height: 70upx;
            font-size: $font-sm + 2upx;
            color: $font-color-light;
            .tit{
                font-size: $font-base + 2upx;
                color: $font-color-dark;
                margin-right: 4upx;
            }
            .tip{
                flex: 1;
                text-align: right;
            }
            .icon-you{
                margin-left: 10upx;
            }
        }
    }
    .eva-box{
        display: flex;
        padding: 20upx 0;
        .portrait{
            flex-shrink: 0;
            width: 80upx;
            height: 80upx;
            border-radius: 100px;
        }
        .right{
            flex: 1;
            display: flex;
            flex-direction: column;
            font-size: $font-base;
            color: $font-color-base;
            padding-left: 26upx;
            .con{
                font-size: $font-base;
                color: $font-color-dark;
                padding: 20upx 0;
            }
            .bot{
                display: flex;
                justify-content: space-between;
                font-size: $font-sm;
                color:$font-color-light;
            }
        }
    }
    /*  详情 */
    .detail-desc{
        background: #fff;
        margin-top: 16upx;
        .d-header{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 80upx;
            font-size: $font-base + 2upx;
            color: $font-color-dark;
            position: relative;

            text{
                padding: 0 20upx;
                background: #fff;
                position: relative;
                z-index: 1;
            }
            &:after{
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translateX(-50%);
                width: 300upx;
                height: 0;
                content: '';
                border-bottom: 1px solid #ccc;
            }
        }
    }

    /* 规格选择弹窗 */
    .attr-content{
        padding: 10upx 30upx;
        .a-t{
            display: flex;

            .right{
                display: flex;
                flex-direction: column;
                padding-left: 24upx;
                font-size: $font-sm + 2upx;
                color: $font-color-base;
                line-height: 42upx;
                .price{
                    font-size: $font-lg;
                    color: $uni-color-primary;
                    margin-bottom: 10upx;
                }
                .selected-text{
                    margin-right: 10upx;
                }
            }
        }
        .attr-list{
            display: flex;
            flex-direction: column;
            font-size: $font-base + 2upx;
            color: $font-color-base;
            padding-top: 30upx;
            padding-left: 10upx;
        }
        .item-list{
            padding: 20upx 0 0;
            display: flex;
            flex-wrap: wrap;
            text{
                display: flex;
                align-items: center;
                justify-content: center;
                background: #eee;
                margin-right: 20upx;
                margin-bottom: 20upx;
                border-radius: 100upx;
                min-width: 60upx;
                height: 60upx;
                padding: 0 20upx;
                font-size: $font-base;
                color: $font-color-dark;
            }
            .selected{
                background: #fbebee;
                color: $uni-color-primary;
            }
        }
    }

    /*  弹出层 */
    .popup {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 199;

        &.show {
            display: block;
            .mask{
                animation: showPopup 0.2s linear both;
            }
            .layer {
                animation: showLayer 0.2s linear both;
            }
            .layer2 {
                animation: showLayer 0.2s linear both;
            }
        }
        &.hide {
            .mask{
                animation: hidePopup 0.2s linear both;
            }
            .layer {
                animation: hideLayer 0.2s linear both;
            }
            .layer2 {
                animation: hideLayer 0.2s linear both;
            }
        }
        &.none {
            display: none;
        }
        .mask{
            position: fixed;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            background-color: rgba(0, 0, 0, 0.4);
        }
        .layer {
            position: fixed;
            z-index: 99;
            bottom: 0;
            width: 100%;
            min-height: 40vh;
            border-radius: 30rpx 30rpx 0 0;
            background-color: #fff;
            .btn{
                height: 66upx;
                line-height: 66upx;
                border-radius: 100upx;
                background: $uni-color-primary;
                font-size: $font-base + 2upx;
                color: #fff;
                margin: 30upx auto 20upx;
            }
        }
        .layer2 {
            position: fixed;
            z-index: 10075;
            bottom: 0;
            width: 100%;
            height: 350rpx;
            border-radius: 50rpx 50rpx 0 0;
            background-color: #fff;

        }
        @keyframes showPopup {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        @keyframes hidePopup {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        @keyframes showLayer {
            0% {
                transform: translateY(120%);
            }
            100% {
                transform: translateY(0%);
            }
        }
        @keyframes hideLayer {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(120%);
            }
        }
    }

    /* 底部操作菜单 */
    .page-bottom{
        position:fixed;
        left: 30upx;
        bottom:30upx;
        z-index: 95;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 690upx;
        height: 100upx;
        background: rgba(255,255,255,.9);
        box-shadow: 0 0 20upx 0 rgba(0,0,0,.5);
        border-radius: 16upx;

        .p-b-btn{
            display:flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: $font-sm;
            color: $font-color-base;
            width: 96upx;
            height: 80upx;
            .yticon{
                font-size: 40upx;
                line-height: 48upx;
                color: $font-color-light;
            }
            &.active, &.active .yticon{
                color: $uni-color-primary;
            }
            .icon-fenxiang2{
                font-size: 42upx;
                transform: translateY(-2upx);
            }
            .icon-shoucang{
                font-size: 46upx;
            }
        }
        .action-btn-group{
            display: flex;
            height: 76upx;
            border-radius: 100px;
            overflow: hidden;
            box-shadow: 0 20upx 40upx -16upx #fa436a;
            box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
            background: linear-gradient(to right, #ffac30,#fa436a,#F56C6C);
            margin-left: 20upx;
            position:relative;
            &:after{
                content: '';
                position:absolute;
                top: 50%;
                right: 50%;
                transform: translateY(-50%);
                height: 28upx;
                width: 0;
                border-right: 1px solid rgba(255,255,255,.5);
            }
            .action-btn{
                display:flex;
                align-items: center;
                justify-content: center;
                width: 180upx;
                height: 100%;
                font-size: $font-base ;
                padding: 0;
                border-radius: 0;
                background: transparent;
            }
        }
    }

</style>
